/*chatRecordList
 *  type = 0 回复
 *  type = 1 发送
 * */

var vm = new Vue({
	el : ".qqBox",
	data : {
		userName : '我',
		userIcon : '../../../img/smart/user.png',
		officalName : "小智",
		officalIcon : "../../../img/smart/offical_icon.jpg",
		officalLastAnswer : "您好！欢迎进入智能客服系统。您想了解什么？请告诉我，希望我的答复能够让您满意。",
		emojiList : [],
		emojiNum : 35,
		chatRecordList : [],		//全部聊天记录
		sendMsg : '',				//发送信息
		showEmoji : false,			//是否显示表情
		isShowHistory : false,		//是否显示历史消息
		showAnswerLength : 28
	},
	created : function(){
		this.$nextTick(function(){
			vm.initData();
		});
	},
	watch : {
		'chatRecordList' : function(val, oldVal){
			val.chatRecordList = this.chatRecordList;
		},
		'sendMsg' : function(val, oldVal){
			val.sendMsg = this.sendMsg;
		}
	},
	methods : {
		initData : function(){			
			vm.sendMsg = '';
			vm.createEmoji();
			vm.chatRecordList = [];
		    vm.chatRecordList.push({
				"type" : 0,
				"chat" : vm.officalLastAnswer
			});
		},
		sendClick : function(){
			vm.sendMsg = vm.sendMsg.trim();
			if(!vm.sendMsg){
				alert('发送内容不能为空');
			}else{
				vm.showReplaceEmojiImg();
				vm.chatRecordList.push({
					"type" : "1",
					"chat" : vm.sendMsg
				});
				vm.$nextTick(function(){
					vm.keepScrollBottom();
				});
				vm.queryAnswer();
//				$('.conLeft').find('li.bg').children('.liRight').children('.infor').text(vm.sendMsg);
				
			}
		},
		queryAnswer : function(){
//			var str;
//			var numFlag = vm.sendMsg.indexOf("、");
//			if(numFlag>-1){
//				var strArr = vm.sendMsg.split("、");
//				var length = strArr[0].length+1;
//				str = vm.sendMsg.substring(length);
//			}
//			//查询第一个分号、之后的字符串
//			if(str){
				var answer_index = vm.sendMsg.substring(0,length);
				$.ajax({ 
					url: projectPath + "repository/list.do",
					method: 'post',
					data:JSON.stringify({"repositoryTitle": vm.sendMsg}),
					dataType: "json",
					contentType: "application/json",
					success: function(data){ 
						if(data.rows && data.rows.length>0){
							var dRows = data.rows;
							var answerStr = "";
							var detail = "";
							var detail_len = "";
							var showWord = "";
							for(var i=0; i < dRows.length; i++){
								detail = dRows[i].detail;
								detail_len = detail.length;
								if(detail_len > vm.showAnswerLength){
									showWord = detail.substring(0,vm.showAnswerLength);
									answerStr += '<a class="answera">'+ (i+1) +'、'+ dRows[i].repositoryTitle +'</a><br/>'
												+'<div>'+ showWord +'<a href="../query/detail.html?repositoryPK='
												+ dRows[i].repositoryPK +'" style="color:red">【详细】</a></div>';
								}else{
									answerStr += '<a class="answera">'+ (i+1) +'、'+ dRows[i].repositoryTitle +'</a><br/><div>'+ detail +'</div>';
								}
							}
						    vm.chatRecordList.push({
								"type" : 0,
								"chat" : answerStr
							});
							vm.$nextTick(function(){
								vm.keepScrollBottom();
//								vm.isHideHistory();
							});
							vm.officalLastAnswer = answerStr;
							vm.sendMsg = '';
						}else{
							vm.answerAjax();
						}
						
			      	}
				});
//			}else{
//				vm.answerAjax();
//			}
		},
		answerAjax : function(){
			$.ajax({ 
				url: projectPath + "repository/list.do",
				method: 'post',
				data:JSON.stringify({"keyWord": vm.sendMsg}),
				dataType: "json",
				contentType: "application/json",
				success: function(data){ 
					if(data.rows && data.rows.length > 0){
						var dRows = data.rows;
						var answerStr = "";
						var detail = "";
						var detail_len = "";
						var showWord = "";
						for(var i=0; i < dRows.length; i++){
							detail = dRows[i].detail;
							detail_len = detail.length;
							if(detail_len > vm.showAnswerLength){
								showWord = detail.substring(0,vm.showAnswerLength);
								answerStr += '<a class="answera">'+ (i+1) +'、'+ dRows[i].repositoryTitle +'</a><br/>'
											+'<div>'+ showWord +'<a href="../query/detail.html?repositoryPK='
											+ dRows[i].repositoryPK +'" style="color:red">【详细】</a></div>';
							}else{
								answerStr += '<a class="answera">'+ (i+1) +'、'+ dRows[i].repositoryTitle +'</a><br/><div>'+ detail +'</div>';
							}
//							answerStr += '<a class="answera">'+ (i+1) +'、'+dRows[i].repositoryTitle+'</a><br/>';
						}

					}else{
						answerStr = '<div>对不起，未查询到  <span style="color:red;">'+vm.sendMsg.toString()
									+'</span> 的匹配记录，请重新输入您想咨询的问题关键词。</div>';
					}
				    vm.chatRecordList.push({
						"type" : 0,
						"chat" : answerStr
					});
					vm.$nextTick(function(){
						vm.keepScrollBottom();
//						vm.isHideHistory();
					});
					vm.officalLastAnswer = answerStr;
					vm.sendMsg = '';
		       },
		       error : function(){}
			});
		},
		selectEmoji : function(event){
			var $target = $(event.currentTarget);
			vm.sendMsg += $target.html();
			vm.replaceEmojiImg();
			$("#sendTextarea").html(vm.sendMsg);
			
			vm.showExpClick();
		},
		//历史消息的展现与隐藏
		isHideHistory : function(){
			var maxlen = vm.chatRecordList.length - 5;
			if(vm.chatRecordList.length%10 > 5){
				vm.isShowHistory = true;
				$('.newsList li:lt('+maxlen+')').hide();
			}
		},
		showHistoryClick : function(){
			$('.newsList li:eq(0),li:gt(0)').show();
			vm.isShowHistory = false;
		},
		showExpClick : function(){
			this.showEmoji = !this.showEmoji;
		},
		createEmoji : function(){
			var emojiList = [];
			for(var i=0; i < this.emojiNum; i ++){
				emojiList.push(i+1);
			}
			this.emojiList = emojiList;
		},
		//将滚动条始终保持在底部
		keepScrollBottom : function(){
			$('.RightCont').scrollTop($('.RightCont')[0].scrollHeight );
		},
		replaceEmojiImg : function(){
			vm.sendMsg = vm.sendMsg.replace('<img src="../../../img/smart/emoji/','#{');
			vm.sendMsg = vm.sendMsg.replace('.gif">','.qqEmoji}');
		},
		showReplaceEmojiImg : function(){
			vm.sendMsg = vm.sendMsg.replace(/#{/g, '<img src="../../../img/smart/emoji/');
			vm.sendMsg = vm.sendMsg.replace(/.qqEmoji}/g,'.gif">');
		}
	}
});


var total; // 总记录
var pageNum = 1; // 当前页
var pageSize = 5; // 每页记录数

var data = {
	"pageNum" : pageNum,
	"pageSize" : "5"
};
getQuestions(data);

function lastPage() {
	if (pageNum == 1 && total != 0) {
		return;
	} else {
		pageNum--;
		data = {
			"pageNum" : pageNum,
			"pageSize" : "5"
		};
		getQuestions(data);
	}
}

function nextPage() {
	if (pageNum == parseInt(total / pageSize) + 1 && total != 0) {
		return;
	} else {
		pageNum++;
		data = {
			"pageNum" : pageNum,
			"pageSize" : "5"
		};
		getQuestions(data);
	}
}

function firstPage() {
	if (total != 0 && pageNum != 1) {
		data = {
			"pageNum" : 1,
			"pageSize" : "5"
		};
		pageNum = 1;
		getQuestions(data);
	}
}

function endPage() {
	if (total != 0) {
		data = {
			"pageNum" : parseInt(total / pageSize) + 1,
			"pageSize" : "5"
		};
		pageNum = parseInt(total / pageSize) + 1;
		getQuestions(data);
	}
}

function getQuestions(data) {
	$
			.ajax({
				type : 'post',
				url : basePath() + "questions/list.do",
				data : JSON.stringify(data),
				dataType : "json",
				contentType : 'application/json',
				success : function(data) {
					var rows = data.rows;
					total = data.total;
					$("#questions").html("");
					var j;
					for (var i = 0; i < rows.length; i++) {
						j = i + 1 + pageSize * (pageNum - 1); // 问题前序号
						if (i == 0) {
							$("#questions")
									.append(
											"<div class='panel-heading' style='background: #eee'><h5 class='panel-title'><a data-toggle='collapse' data-parent='#accordion' href='#collapse"
													+ i
													+ "' style='text-decoration: none;font-size:15px'>"
													+ j
													+ "."
													+ rows[i].content
													+ "</a></h5></div>");
							$("#questions")
									.append(
											"<div id='collapse"
													+ i
													+ "' class='panel-collapse collapse in'><div class='panel-body' style='overflow-y:auto;max-height:120px;'>"
													+ rows[i].replyContent
													+ "</div></div>");
						} else
							$("#questions")
									.append(
											"<div class='panel-heading' style='background: #eee'><h5 class='panel-title'><a data-toggle='collapse' data-parent='#accordion' href='#collapse"
													+ i
													+ "' style='text-decoration: none;font-size:15px'>"
													+ j
													+ "."
													+ rows[i].content
													+ "</a></h5></div>");
						$("#questions")
								.append(
										"<div id='collapse"
												+ i
												+ "' class='panel-collapse collapse'><div class='panel-body' style='overflow-y:auto;max-height:120px;'>"
												+ rows[i].replyContent
												+ "</div></div>");

					}
				}
			});
}